
<script setup lang="ts">
	
	import { ref } from 'vue'
	import customVoice from './voice.vue'
	
	withDefaults(defineProps<{
		list: { [key: string]: string }[]
	}>(), {
		list: () => ([])
	})
	
	type Voice = typeof customVoice
	const voiceRefs = ref<Voice[]>([])
	
	uni.$on('voice-play', function(id: string) {
		voiceRefs.value.forEach((voice, index) => index !== +id && voice?.pause())
	})
	
	
</script>

<script lang="ts">
	export default {
		options: { virtualHost: true }
	}
</script>

<template>
	<view class="py-20 flex items-center justify-between border-bottom" v-for="item, index in list" :key="index">
		<text class="u-line-2 min-w-0 flex-1 mr-20 text-28">{{ item.name }}</text>
		<custom-voice :src="item.url" :ref="(ref: Voice) => voiceRefs.push(ref)" :id="index" />
	</view>
</template>